<template>
    <!-- 搜索表单 -->
    <div class="companyList-main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="width: 160px">
                <el-select v-model="company" placeholder="选择公司">
                    <el-option
                        v-for="option in companyOptions"
                        :key="option.value"
                        :value="option.value"
                        :label="option.name"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="width: 160px">
                <el-input v-model="formInline.company" placeholder="请输入公司名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <hr />

        <!-- 数据表格 -->
        <el-table
            border
            height="380"
            :data="tableData"
            highlight-current-row
            @current-change = "clickCurrentChange"
            style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                width="60"
            ></el-table-column>
            <el-table-column
                prop="company"
                label="公司名"
            ></el-table-column>
            <el-table-column
                prop="companyP"
                label="上级公司"
            ></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                :layout="!isDialog ? 'total, sizes, prev, pager, next, jumper' : 'prev, pager, next'"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import companyListApi from '@/api/companyList'

export default {
    props: {
        // 接收父组件传递过来的数据
        isDialog: Boolean
    },
    data(){
        return{
            company: '',
            formInline: {
                company: ''
            },
            companyOptions: [],
            tableData: [],
            currentPage: 4,
            total: 0,
            pageSize: 10
        }
    },

    created(){
        this.feachData()
    },

    watch: {
        company: function(newValue, oldValue){
            this.feachDataByCompany()
        }
    },

    methods: {
        // 点击搜索按钮
        onSubmit(){
            console.log('submit!')
            this.feachData()
        },
        // 改变每页条数
        handleSizeChange(val){
            console.log(val)
            this.feachData()
        },
        // 改变当前页码
        handleCurrentChange(val){
            console.log(val)
            this.feachData()
        },

        // 获取数据
        feachData(){
            const token = localStorage.getItem('seeto-token').token
            companyListApi.getCompanyListData(token, this.currentPage, this.pageSize, this.formInline).then(response => {
                const resp = response.data
                if(resp.flag){
                    const respD = resp.data
                    this.tableData = respD.companyTableList
                    this.companyOptions = respD.companyList
                    this.total = respD.total
                    this.currentPage = respD.currentPage
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
        },

        // 通过公司选出公司信息
        feachDataByCompany(){
            const token = localStorage.getItem('seeto-token').token
            carListApi.getCompanyListDataByCompany(token, this.currentPage, this.pageSize, this.company).then(response => {
                const resp = response.data
                if(resp.flag){
                    const respD = resp.data
                    this.tableData = respD.companyTableList
                    this.companyOptions = respD.companyList
                    this.total = respD.total
                    this.currentPage = respD.currentPage
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
        },

        // 定义子组件事件，获取子组件过来的传递信息
        clickCurrentChange(currentRow){
            console.log(currentRow)
            this.$emit('option-company', currentRow)
        }
    }
}
</script>

<style scoped>
.companyList-main{
    padding: 20px
}
hr{
    padding: 0;
    margin: 0;
}
</style>